<template>
    <a-layout>
        <a-layout-sider :style="pageLayoutSiderStyle">
            <div class="sider-inner" :style="{width:showSide?'100%':'10px'}">
                <div class="switch" @click="switchSider">
                    <a-icon type="backward" v-if="showSide" />
                    <a-icon type="forward" v-else />
                </div>
                <div class="list" v-if="showSide">
                    <a-tree
                        v-if="treeData.length>0"
                        :key="treeDataKey"
                        :defaultExpandedKeys="expandedKeys"
                        :auto-expand-parent="autoExpandParent"
                        :selected-keys="selectedKeys"
                        :tree-data="treeData" 
                        @expand="onExpand"
                        @select="onSelect"
                    >

                    </a-tree>
                </div>
            </div>
        </a-layout-sider>
        <a-layout-content>
            <a-tabs default-active-key="1">
                <template slot="tabBarExtraContent">
                    <a-input-search placeholder="请输入查询内容" v-model="keyword"  style="width: 200px" @search="onSearch">
                    </a-input-search>
                </template>
                <a-tab-pane key="1" tab="原文查看"></a-tab-pane>
            </a-tabs>
            <div class="table-wrap">
                <a-table :data-source="articles" :rowKey="record=>record.fileId" :pagination="pageSetting" @change="changeTable">
                    <a-table-column key="fileId" title="序号" data-index="fileId" :width="60" />
                    <a-table-column key="fileName" title="标题" data-index="fileName" :width="250">
                        <template slot-scope="text,record">
                            <a :href="getDownloadUrl(record.fileId)" target="_blank" rel="noopener noreferrer">{{text}}</a>
                        </template>
                    </a-table-column>
                    <a-table-column key="fileDesc" title="文件描述" data-index="fileDesc">
                        <template slot-scope="text">
                            <div v-html="text"></div>
                        </template>
                    </a-table-column>
                    <a-table-column key="realName" title="上传者" data-index="realName" :width="100" />
                    <a-table-column key="createTime" title="上传时间" data-index="createTime" :width="180" />                    
                </a-table>
            </div>

            
        </a-layout-content>
    </a-layout>
</template>

<script>
import config from '../../until/configs';
import {pageLayoutSiderStyle,pageLayoutSiderHideStyle} from '../../until/global_style';
import { getCookie } from '../../until/tools';
export default {
    name:'Articles',
    data() {
        return {
            pageLayoutSiderStyle:pageLayoutSiderStyle,
            showSide:true,
            autoExpandParent: true,
            treeDataKey:0,
            selectedKeys: [],
            expandedKeys: [],
            treeData:[],
            articles:[],
            page:{},
            keyword:''
            
        }
    },
    computed:{
        folderId() {
            let id = this.$route.query.folderId;
            if(id) {
                return parseInt(id);
            }
            return null;
        },
        pageSetting(){
			let pageSize=0;
			if(this.page.allSize) {
				pageSize = this.page.allSize;
			}
			return {
				showQuickJumper:true,
				hideOnSinglePage:true,
				showTotal:()=>`共${pageSize}条`,
				total:pageSize,
			}
		},
    },
    watch:{
        folderId(value) {
            if(value) {
                this.getArticles();
            }
        }
    },
    created() {
        this.getFolders().then(res=>{
            if(!this.folderId) {                
                if(res&&this.treeData[0]) {
                    this.selectedKeys = [this.treeData[0].folderId];
                    this.$router.push({path:'datas_articles',query:{folderId:this.treeData[0].folderId}});
                }                
            } else {
                this.selectedKeys = [this.folderId];
            }
        });
        if(this.folderId) {
            this.getArticles();
        }
    },
    methods:{
        getDownloadUrl(id){
            return config.downloadArticle+'?sid='+getCookie('bd_sid')+'&fileId='+id;
        },
        switchSider() {
            this.showSide = !this.showSide;
            if(this.showSide) {
                this.pageLayoutSiderStyle = pageLayoutSiderStyle;
            } else {
                this.pageLayoutSiderStyle = pageLayoutSiderHideStyle
            }
        },

        getFolders() {
            return this.$http.inputs_get_article_folder().then(res=>{
                if(res) {
                    if(res.list) {
                        res.list.forEach(item=>{   
                            item.title = item.folderName;         
                            item.scopedSlots = { title: 'title' };
                            item.titleCopy = item.title;
                            item.key = item.folderId;
                            item.editStatus = 0;
                        });
                        this.treeData = this.setTree(res.list,-1,[]);
                    }
                }
                return true;
            });
        },

        setTree(arr,pid,result) {
            arr.forEach(item=>{
                if(item.parentId===pid) {
                    item.children = this.setTree(arr,item.folderId,[]);
                    result.push(item);
                }
            })
            return result;
        },

        onExpand(e) {
            this.expandedKeys = e;
        },

        onSelect(selectedKeys) {
            this.selectedKeys = selectedKeys;
            this.$router.push({path:'datas_articles',query:{folderId:selectedKeys[0]}});
        },

        onSearch(e) {
            if(e) {
                this.getArticles({currentPage:1,dimFileName:e});
            } else {
                this.getArticles({currentPage:1});
            }
            
        },
        changeTable(e) {
            this.getArticles({currentPage:e.current,dimFileName:this.keyword});
        },
        getArticles(obj) {
            let params = {folderId:this.folderId};
            if(obj) {
                params={...params,...obj}
            }
            this.$http.inputs_get_articles(params).then(res=>{
                if(res) {
                    if(res.list) {
                        this.articles = res.list;
                        this.page = res.page;
                    }
                }
            })
        },
        
    }
}
</script>

<style lang="scss">
    @import '../../scss/articles.scss';
</style>